<template>
  <div class="houseDetail">
    <hunk-head customEvent="true" @headFn="gobanck" name="房源详情编辑"></hunk-head>
    <div class="content">
      <div class="detail-list">
        <div class="item-address">
          <div class="address">房源地址</div>
          <div class="deladd" @click="editAddr">
            <div class="del1">{{houseInfo.tHouse.address}}</div>
            <!-- <div class="del2"></div> -->
            <img class="icon del2" v-if="baseUrl" :src="baseUrl+'imgs/imgs/right.png'" alt="" srcset="">
          </div>
        </div>
        <div class="item-num">
          <div class="address">门锁编号</div>
          <div class="deladd">
            <div>{{houseInfo.tHouse.devicecode?houseInfo.tHouse.devicecode:'未绑定'}}</div>
            <div class="btn1" @click="clickLock(0,houseInfo.tHouse)">{{houseInfo.tHouse.locknumber?'换绑大门锁':'绑定大门锁'}}</div>
          </div>
        </div>
        <div class="tishi">
          <div class="blak">温馨</div>
          <div>提示：</div>
          <div>已出租的房源不能编辑和删除</div>
        </div>
        <div v-if="houseInfo.tHouse.wid">
          <div class="item-house" v-for="(item, index) in houseInfo.roomlist" :key="index" @click="gotoEdit(item,houseDetail)">
            <div class="itemt">{{houseInfo.tHouse.outtype == 1 ? '整租' : '合租'}}-{{item.roomno}}</div>
            <div class="itemd">{{item.roomarea ? item.roomarea+'m²/' : ''}}{{item.roomtype? item.roomtype+'室/' :''}}{{item.renovation}}</div>
            <div class="lock">
              门锁编号：{{item.devicecode?item.devicecode:'未绑定'}}
            </div>
            <div class="lock">
              电表编号：{{item.powersn?item.powersn:'未绑定'}}
            </div>
            <div class="statusimg">
              <img :src="item.outtype==1 ? rented : kongzhi" alt="" srcset="">
             
            </div>
            <div class="price">
              <div class="pricebig">
                {{item.showlowrent}}元
                <span>/月</span>
              </div>
              <div class="btn">
                <!-- <div class="btn1" @click.stop="clickLock(1,item)">{{item.locknumber?'换绑门锁':'绑定门锁'}}</div> -->
                <!-- //合租---换绑门锁 -->
                 <div class="btn1" v-if="item.outtype == 1 " @click.stop="goToLeaseDetail(item)">租约详情</div>
                <div class="btn1" v-if="item.outtype != 1 " @click.stop="openPopup2(item)">绑定电表</div>
                <div v-if="!houseInfo.tHouse.outtype && !item.outtype" class="btn1" @click.stop="clickLock(1,item)">{{item.locknumber?'换绑房间门锁':'绑定房间门锁'}}</div>
                <div v-if="item.outtype==0" @click.stop="detal(item)">删除</div>
              </div>
              
            </div>
          </div>
        </div>
        
        <div class="add-house">
          <div class="add-btn" @click="addHouse">
            <img :src="add" alt="" srcset="">
            <div>添加房间</div>
          </div>
        </div>
      </div>
      <div class="detail-bottom">
        <button class="finishEdit" @click="finishEdit">完成编辑</button>
      </div>
    </div>
    <uni-popup ref="popup1" type="center">
      <div class="tips">
        <div class="tips-top">提示</div>
        <div class="tips-text">尚未添加房间，是否退出编辑？</div>
        <div class="tips-btn">
          <div class="btn-closs" @click="closeOne">取消</div>
          <div  @click="tuichu">确认</div>
        </div>
      </div>
    </uni-popup>
    <uni-popup ref="popup" type="center">
      <div class="tips">
        <div class="tips-top">提示</div>
        <div class="tips-text">{{popuptext}}</div>
        <div class="tips-btn">
          <div class="btn-closs" @click="closePopup">取消</div>
          <div  @click="closePopup">确认</div>
        </div>
      </div>
    </uni-popup>

    <uni-popup ref="popup2" type="center">
      <div class="tips">
        <div class="tips-top">提示</div>
        <div class="tips-text">请选择绑定方式</div>
        <div class="tips-btn">
          <div class="btn-closs" @click="bindPowerSn(1)">解绑电表</div>
          <div  @click="bindPowerSn(0)">绑定/换绑</div>
        </div>
      </div>
    </uni-popup>
  </div>
</template>

<script>
const imgUrl = `${process.env.VUE_APP_BASE_IMG_URL}`
const kongzhi = imgUrl+'house/kongzhi.png'
const renting = imgUrl+'house/renting.png'
const rented = imgUrl+'house/rented.png'
const add = imgUrl+'house/add.png'
import Head from '@componentsMine/head'
import { getHouseInfo, houseRemove, bindLockNumber,bindPowerSn } from '@/apis/housesInfo'
export default {
  components: {
    'hunk-head': Head
  },
  data() {
    return {
      kongzhi,
      renting,
      rented,
      add,
      popuptext: '',
      houseDetail: null,
      popup2Item:{},
      houseInfo: {
        "roomlist": [
          {
            "deposit": 0,
            "facilities": "",
            "houseid": 0,
            "leasetype": 0,
            "locknumber": "",
            "lowrent": 0,
            "outtype": 0,
            "payrent": 0,
            "photos": "",
            "renovation": "",
            "roomarea": "",
            "roomno": "",
            "roomtype": 3,
            "showlowrent": 0,
            "userid": 0,
            "wid": 0
          }
        ],
        "tHouse": {
          "address": "",
          "area": "",
          "building": "",
          "city": "",
          "communityname": "",
          "housenumber": "",
          "latitude": "",
          "locknumber": "",
          "longitude": "",
          "province": "",
          "state": 0,
          "unit": "",
          "userid": 0,
          "wid": 0
        }
      },
      houseInfo1: {
        "roomlist": [
          {
            "deposit": 0,
            "facilities": "",
            "houseid": 0,
            "leasetype": 0,
            "locknumber": "",
            "lowrent": 0,
            "outtype": 0,
            "payrent": 0,
            "photos": "",
            "renovation": "",
            "roomarea": "",
            "roomno": "",
            "roomtype": 3,
            "showlowrent": 0,
            "userid": 0,
            "wid": 0
          }
        ],
        "tHouse": {
          "address": "",
          "area": "",
          "building": "",
          "city": "",
          "communityname": "",
          "housenumber": "",
          "latitude": "",
          "locknumber": "",
          "longitude": "",
          "province": "",
          "state": 0,
          "unit": "",
          "userid": 0,
          "wid": 0
        }
      }
    }
  },
  computed:{
    baseUrl() {
      return process.env.VUE_APP_BASE_IMG_URL;
    }
  },
  onShow(){
    console.log('执行onshow')
    this.getHouseInfo()
  },
  onLoad(e){
    console.log('执行onload',e)
    this.houseDetail = JSON.parse(e.query)
    this.getHouseInfo()

  },
  methods: {
    openPopup2(item){
      this.popup2Item = item
      this.$refs.popup2.open()
    },

    bindPowerSn(type){
      //绑定
      if(type==0){
         uni.scanCode({
          scanType: ['qrCode'],
          success: (res)=> {
            console.log('条码内容：' + res.result,res);
              bindPowerSn({
                wid:this.popup2Item.wid,
                type,
                devicecode:res.result
              }).then(e=>{
                 if(e.code == 200){
                    uni.showToast({
                      title: '绑定成功！',
                      icon: 'none'
                    })
                  this.getHouseInfo()
                 }else{
                  
                    uni.showToast({
                      title: e.msg,
                      icon: 'none'
                    })
                 }
                  this.$refs.popup2.close()
              })
            // that.bindLockNumber(int,itme,res.result)
          }
        })
      }else{
        bindPowerSn({
          wid:this.popup2Item.wid,
          type,
          devicecode:''
        }).then(e=>{
            if(e.code == 200){
              uni.showToast({
                title: '解绑成功！',
                icon: 'none'
              })
            }
             this.getHouseInfo()
            this.$refs.popup2.close()
        })
      }

    },


    goToLeaseDetail(item){
      console.log(9999)
      // item
      // '/pages/link/confirmlease?wid='+that.wid
      // uni.navigateTo({ url: '/pages/link/confirmlease?wid='+item.wid+'&souse=1' })
      let data = {
        wid: item.housecontractwid,
        state: 1
      }
      uni.navigateTo({ url: '/pages/tenant/lease/detaillease?query=' + JSON.stringify(data) })
    },
    editAddr(){
      uni.navigateTo({ url: '/subPackage/manage/commponents/addhouse/addone?query='+JSON.stringify(this.houseInfo.tHouse) })
      // console.log('等后端接口')
    },
    gobanck(res){
      let aa = getCurrentPages()
      let idx = 10
      aa.forEach((item,index)=>{
        if(item.route == 'pages/index/index'){
          idx = index
        }
      })
      // console.log('gobanck',(aa.length - idx+1),idx,aa.length,aa)
      if(idx == 10){
        // uni.navigateBack({ delta: 3 })
        uni.reLaunch({
          url: '/pages/index/index'
        })
      }else{
        uni.navigateBack({ delta: aa.length - (idx+1) })
      }
      
    },
    finishEdit(){
      if(this.houseInfo.roomlist.length > 0){
        this.tuichu()
      }else{
        this.$refs.popup1.open()
      }
    },
    closeOne(){
      this.$refs.popup1.close()
    },
    tuichu(){
      this.$refs.popup1.close()
      let aa = getCurrentPages()
      let idx = 10
      aa.forEach((item,index)=>{
        if(item.route == 'pages/index/index'){
          idx = index
        }
      })
      if(idx == 10){
        // uni.navigateBack({ delta: 3 })
        uni.reLaunch({
          url: '/pages/index/index'
        })
      }else{
        uni.navigateBack({ delta: aa.length - (idx+1) })
      }
    },
    detal(item){
      if(item.outtype == 1){
        this.popuptext = '已出租房源不能删除'
        this.$refs.popup.open()
      }else{
        if(this.houseInfo.roomlist.length<=1){
           uni.showModal({
                title: '提示',
                content: '删除最后一个房间后该地址将被彻底删除，是否确认删除',
                success: res => {
                   if (res.confirm) {
                     this.detalHouse(item).then(()=>{
                       uni.redirectTo({ url: '/pages/index/index' })
                     })
                   }
                }
           })
        }else{
          this.detalHouse(item)
        }
      }
    },
    closePopup() {
      this.$refs.popup.close()
    },
    addHouse() {
      let data ={
        houseid:this.houseDetail.houseid,
        adress: this.houseInfo.tHouse.address
      }
      this.$jump({ path: '/pages/manage/houseList/commponents/addhouse?query='+ JSON.stringify(data)})
    },
    gotoEdit(item,houseDetail){
      // houseDetail.photos = encodeURIComponent(houseDetail.photos )
      let data = {
        item:item,
        houseDetail: {
          houseid: this.houseDetail.houseid,
          address: this.houseInfo.tHouse.address
        }
      }
      console.log('gotoedit',data)
      this.$jump({ path: '/pages/manage/houseList/commponents/edit?query='+ JSON.stringify(data)})
    },
    getHouseInfo(){
      let that = this
      getHouseInfo({wid: this.houseDetail.houseid}).then(res =>{
        if(res.code == 200){
          if(!res.data){
            that.houseInfo = that.houseInfo1
            return
          }
          that.houseInfo = res.data
        }
      })
    },
    detalHouse(item){
      return new Promise((reslove,reject)=>{
        let that = this
        const data = {
          houseid: item.houseid,
          wid: item.wid
        }
        houseRemove(data).then(res=>{
          if(res.code == 200){
            uni.showToast({
              title: '删除成功',
              icon: 'none'
            })
            setTimeout(function(){
              that.getHouseInfo()
            },1000)
            reslove()
          }else{
            uni.showToast({
              title: res.msg,
              icon: 'none'
            })
          }
        })
      })
      
    },
    clickLock(int,itme){
      if(this.houseInfo.roomlist.length<=0){
        uni.showToast({
            title: '请先添加房间',
            icon: 'none'
          })
        return 
      }
      if(int == 1 && !this.houseInfo.tHouse.locknumber){
        uni.showToast({
            title: '请先绑定大门门锁！',
            icon: 'none'
          })
        return 
      }
      let that = this
      uni.scanCode({
        scanType: ['qrCode'],
        success: function (res) {
          console.log('条码内容：' + res.result,res);
          that.bindLockNumber(int,itme,res.result)
        }
      })
    },
    bindLockNumber(int,item,devic){
      let that = this
      const data = {
        devicecode: devic,
        type: int,
        wid: item.wid
      }
      bindLockNumber(data).then(res=>{
        if(res.code == 200){
          uni.showToast({
            title: '绑定门锁成功！',
            icon: 'none',
            success: ()=>{
              that.getHouseInfo()
            }
          })
          // setTimeout(function(){
            
          // },1500)
        }else{
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.houseDetail {
  @include num();
  background: #F9F9F9;
  display: flex;
  flex-direction: column;
  .content{
    flex: 1;
    overflow-y: auto;
  }
  .detail-list{
    .item-address{
      background-color: #fff;
      padding: 15px;
      padding-bottom: 10px;
      box-sizing: border-box;
      .address{
        height: 24px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #000000;
        line-height: 24px;
      }
      .deladd{
        display: flex;
        justify-content: space-between;
        align-items: center;
        // height: 32px;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9B9B9B;
        line-height: 16px;
        margin-top: 5px;
        .del1{
          flex: 1;
          overflow: hidden;
        }
        .del2{
          margin-left: 8px;
        }
        .icon{
          width: 9px;
          height: 15px;
       }
      }
    }
    .item-num{
      background-color: #fff;
      box-sizing: border-box;
      padding: 10px 15px;
      .address{
        height: 24px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #000000;
        line-height: 24px;
      }
      .deladd{
        margin-top: 5px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 32px;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9B9B9B;
        line-height: 32px;
        .btn1{
          width: 90px;
          height: 26px;
          background: linear-gradient(315deg, #FFAA58 0%, #FFBD6C 100%);
          border-radius: 13px;
          color: #fff;
          line-height: 26px;
          text-align: center;
        }
      }
    }
    .tishi{
      font-style:italic;
      background-color: #fff;
      margin: 10px 0;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 600;
      color: #FFAA58;
      line-height: 24px;
      display: flex;
      padding: 12px 15px;
      .blak{
        color: #000000;
      }
    }
    .item-house{
      background-color: #fff;
      box-sizing: border-box;
      padding: 10px 15px;
      border-bottom: 2px solid #EFEFEF;
      .itemt{
        height: 24px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #000000;
        line-height: 24px;
      }
      .itemd{
        height: 20px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #4A4A4A;
        line-height: 20px;
        margin-top: 5px;
      }
      .statusimg{
        display: flex;
        justify-content: space-between;
        img{
          width: 48px;
          height: 20px;
        }
        margin-bottom: 5px;
        div{
          width: 86px;
          height: 26px;
          background: linear-gradient(315deg, #FFAA58 0%, #FFBD6C 100%);
          border-radius: 13px;
          color: #fff;
          line-height: 26px;
          text-align: center;
          font-size: 16px;
        }
      }
      .lock{
        height: 20px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        line-height: 20px;
        color: #9B9B9B;
        margin: 5px;
      }
      .price{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .pricebig{
          height: 25px;
          font-size: 18px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #FF5A65;
          line-height: 25px;
          span{
            font-size: 12px;
          }
        }
        .btn{
          display: flex;
          div{
            width: 66px;
            height: 24px;
            background: #FF6B75;
            border-radius: 12px;
            font-size: 13px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
            line-height: 24px;
            text-align: center;
          }
          .btn1{
            width: 90px;
            height: 24px;
            background: linear-gradient(315deg, #FFAA58 0%, #FFBD6C 100%);
            border-radius: 13px;
            color: #fff;
            line-height: 24px;
            text-align: center;
            margin-right: 5px;
          }
        }
        
      }
    }
    .add-house{
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      padding: 10px 0;
      background-color: #fff;
      .add-btn{
        width: 345px;
        height: 33px;
        background: #F9F9F9;
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #849AAE;
        line-height: 33px;
        img{
          width: 16px;
          height: 16px;
          margin-right: 10px;
        }
      }
    }
  }
  .detail-bottom{
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 10px;
    .finishEdit{
      border: 0;
      width: 345px;
      height: 45px;
      background: linear-gradient(315deg, #FFAA58 0%, #FFBD6C 100%);
      box-shadow: 0px 2px 4px 0px rgba(252, 174, 55, 0.21), 0px 3px 5px 0px rgba(255, 216, 111, 0.14);
      border-radius: 100px;
      font-size: 16px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #FFFFFF;
      line-height: 45px;
      text-shadow: 0px 2px 4px rgba(252, 174, 55, 0.21);
      text-align: center;
    }
    .finishEdit::after{
      border: 0;
    }
    uni-button:after{
      border: 0;
    }
  }
  .tips{
    width: 335px;
    height: 174px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
    background-color: #fff;
    position: relative;
    .tips-top{
      height: 22px;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #4A4A4A;
      line-height: 22px;
      margin: 20px 0 30px 0;
    }
    .tips-text{
      height: 22px;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #6D7278;
      line-height: 22px;
    }
    .tips-btn{
      width: 100%;
      border-top: 2px solid #EFEFEF;
      display: flex;
      position: absolute;
      bottom: 0;
      div{
        height: 40px;
        width: 50%;
        font-size: 13px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #4A4A4A;
        line-height: 40px;
        text-align: center;
      }
      .btn-closs{
        border-right: 2px solid #EFEFEF;
      }
    }
  }
}
</style>
